<template>
  <div>
    <el-upload class="upload-demo" accept="image/*" :data="uploadParams.uploadData" :action="uploadParams.uploadFileUrl"
      :headers="uploadParams.uploadHeaders" list-type="picture" :on-success="uploadSuccess" :limit="1" :on-exceed="handleExceed">
      <el-button size="small" type="primary">点击上传{{uploadPath}}</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
  import {
    getUploadParamsApi
  } from '../request/api.js'
  export default {
    props: {
      uploadPath: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    created() {
      console.log(this.$parent)
      // 获取文件上传的参数配置
      this.uploadParams = getUploadParamsApi(this.$props.uploadPath)
    },
    methods: {
      // 文件上传成功回调
      uploadSuccess(response) {
        console.log(response)
        // 返回数据给父组件
        this.$emit('uploadSuccess', response)
      },
      // 文件超出个数限制时的钩子
      handleExceed(files, fileList) {
        this.$message.warning('只允许上传一图片，请删除后重新上传')
      }
    }
  }
</script>

<style>
</style>
